<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<jsp:include page="../frame/header.jsp"></jsp:include>

<title>论坛会员等级</title>

<style>
.pagination .active a {
	/*background-color: #CC0041;
	color:white;*/
}
.table td {
	padding-top:2px;
	padding-bottom:2px;
}
.table td input {
	margin-top:8px;
}
.table td a{
	diplay:block;
	line-height:50px;
	height:50px;
	margin-top:8px;
}

.my-width{
	width:80px !important;
}

.my-width-0{
	width:80px !important;
}
</style>

</head>

<body>

	<div class="container-fluid">
		<div id="market" class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">会员管理</a> <span class="divider">/</span></li>
					<li><a href="#">论坛会员用户组</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-th"></i> 用户组等级列表
					</h2>

					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<button id="addBtn" type="button" class="btn "><i class="icon-plus"></i>添加</button>
					<form id="myform" class="form-horizontal" method="post"
						action="<c:url value="/admin/member/group" />">

						<fieldset>
							<table id="groups" class="table table-striped table-bordered ">
								<thead>
									<tr>
										<th>用户组</th>
										<th>经验值下限</th>
										<th>经验值上限</th>
										<th>说明</th>
										<th>徽章</th>
										<th width=50>删除</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${groups }" var="group">
									<tr>
										<td><input type="text" class="input-small" value="${group.groupName }"></td>
										<td><input type="text" class="input-small" value="${group.expLowerLimit }"></td>
										<td><input type="text" class="input-small" value="${group.expUperLimit }"></td>
										<td><textarea class="input-xlarge" rows="4">${group.description_mc }</textarea></td>
										<td>
											<input class="input-file uniform_on" name="file"
															id="file_${group.groupId }" type="file" onchange="return ajaxFileUpload(${group.groupId});">
											<img id="picture_${group.groupId }"
															src='<c:url value="/resources/fileupload/${group.picture }"/>'
															height="80"> 
											<input type="hidden" name="pic" id="pic_${group.groupId }"
															value="${group.picture }">
										</td>
										<td>&nbsp;&nbsp; <a
										href="javascript:void(0)" onclick="del(this)"><i class="icon-minus"></i></a></td>
									</tr>
									</c:forEach>
								</tbody>
							</table>
							
							<input type="hidden" name="groupStr" id="groupStr">
							
							<div class="form-actions">
								<button id="saveBtn" type="button" class="btn btn-primary">提交</button>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
		<!--/fluid-row-->

	</div>
	<!--/.fluid-container-->

	<jsp:include page="../frame/scripts.jsp"></jsp:include>
	<script type="text/javascript">
	
	$(document).ready(function(){
		
		//$(".uploader").find('.filename').html('').addClass('my-width-0');
		$(".uploader").find(".action").html('上传');
		//$(".uploader").addClass('my-width');
		

		//保存
		$('#saveBtn').click(function() {
			var infos = [];
			$("#groups tbody tr").each(function(i,item){
				if($(item) != null && $(item).length > 0){
					var info = new Object();
					
					info.groupName = $(item).find("td:eq(0)").find("input").val();
					info.expLowerLimit = $(item).find("td:eq(1)").find("input").val();
					info.expUperLimit = $(item).find("td:eq(2)").find("input").val();
					info.description_mc = $(item).find("td:eq(3)").find("textarea").val();
					info.picture = $(item).find("td:eq(4)").find("input[name=pic]").val();
					console.log(info);
					infos.push(info);
				}
			})
			if(infos.length == 0){
				alert("请至少添加一个用户组！");
				return;
			}
			var str = JSON.stringify(infos);
			$("#groupStr").val(str);
			$("#myform").submit();
		})
		
		$("#addBtn").click(function(){
			//添加表格
			var str = '<tr>';
			str += '<td><input type="text" class="input-small" value=""></td>';
			str += '<td><input type="text" class="input-small" value=""></td>';
			str += '<td><input type="text" class="input-small" value=""></td>';
			str += '<td><textarea class="input-xlarge" rows="2"></textarea></td>';
			str += '<td >&nbsp;&nbsp; <a href="javascript:void(0)" onclick="del(this)"><i class="icon-minus"></i></a></td>';
			str += '</tr>'
			
			$("#groups tbody").append(str);
			
		})
	});
	
	function del(obj){
		$(obj).parent().parent().remove();
	}
	
	function ajaxFileUpload(id) {
		
		$.ajaxFileUpload({
			url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
			secureuri : false,//一般设置为false
			fileElementId :'file_'+id,//文件上传空间的id属性  <input type="file" id="file" name="file" />
			dataType : 'JSON',//返回值类型 一般设置为json(大写)
			success : function(data, status) {
				var image = DOMAIN + '/resources/fileupload/' + $(data).html();
				$("#picture_"+id).attr('src', image).show();
				$("#pic_"+id).val($(data).html());
			},
			error : function(data, status, e) {
				alert(e);
			}
		})

		return false;
	}
	
	function test(){
		alert(1);
	}
	</script>
</body>
</html>
